<template>
  <div class="faq">
    <Loading :isLoading = "isLoading" />
    <a-collapse accordion>
      <a-collapse-panel v-for="item in questionArr" :key="item.id" :header="item.ask" >
        <p>{{item.answer}}</p>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import {ref,onMounted} from 'vue';
import {getQuestionList} from "../../api/support";
import Loading from '../Loading.vue'
export default {
  name: "Faq",
  components:{Loading},
  setup(){
    const questionArr = ref([])
    let isLoading = ref(true)
    onMounted(()=>{
      getQuestionList().then((res)=> {
        if(res && res.code === 200){
          questionArr.value = res.data
          isLoading.value = false
        }
      })
    })
    return {
      questionArr,
      isLoading
    }
  }
}
</script>

<style scoped lang="scss">
.faq{
  margin:20px 0;
  ::v-deep .ant-collapse-header{
    font-weight:500;
    font-size: 18px;
    color:rgba(0, 0, 0, 0.75);
  }
}
</style>
